<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>购物车页</title>
    <script src="./js/jquery.1.11.3.js"></script>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/car.css">
    <link rel="stylesheet" href="./css/icon/iconfont.css">
    <script src="./js/axios.js"></script>
    <script src="./js/cookie.js"></script>

</head>

<body>
    <header></header>
    <div class="car_full">
        <div class="car">
            <div class="top">
                <span><input type="checkbox" id="checkall">全选</span>
                <span>商品</span>
                <span>单价</span>
                <span>数量</span>
                <span>小计</span>
                <span>操作</span>
            </div>
            <ul id="cartul">

            </ul>
            <div class="bottom clean">
                <div class="choose">
                    已选择<span class="choose_1">0</span>件
                </div>
                <div class="choose22">总价：<span class="shopall">0</span></div>


                <div class="jiesuan">
                    去结算
                </div>
                <!-- <span id="all_pro"></span> -->
            </div>
        </div>
    </div>
    <footer></footer>
</body>
<script src="./js/car.js"></script>
<script>
    $(function () {


        $("header").load("header.html");
        $("footer").load("footer.html");
        //////////////
        if (!getCookie("uid")) {
            $(location).attr('href', "login.html");
        }
        ////////////
        // let cart = new Cart();
        // cart.showList("cartul");

        let uid = getCookie("uid")

        $.get(`http://jx.xuzhixiang.top/ap/api/cart-list.php?id=${uid}`).then(res => {
            str = ""
            for (let i = 0; i < res.data.length; i++) {

                res.data[i].pimg = res.data[i].pimg.split(",")
                str += `
                <li data_id="${res.data[i].pid}">
                    <input type="checkbox" class="check_li">
                    <a href="deteli.html?${res.data[i].pid}" class="pimg">
                        <img
                            src="${res.data[i].pimg[0]}">
                    </a>
                    <p class="pname">
                        <a href="deteli.html?${res.data[i].pid}">
                      ${res.data[i].pname} </a>
                    </p>
                    <p class="pprice">${res.data[i].pprice}</p>
                    <div class="num"><span class="jian">-</span><input type="text" value="${res.data[i].pnum}"><span class="jia">+</span>
                    </div>
                    <div class="much">${res.data[i].pnum*res.data[i].pprice}</div>
                    <div class="del_this">删除</div>
                </li>
                `
            }
            $("#cartul").html(str)
        }).then(function () {
            //购物车加减商品
            let k = $(".num").children().eq(1).val();

            $(".jian").click(function () {
                console.log(this);
                let k = $(this).next().val();
                k = k - 1
                if (k <= 0) {
                    k = 1
                }
                $(this).next().val(k)
                $(this).parent().next().text(k * parseInt($(this).parent().prev().text()))
                console.log(k, parseInt($(this).parent().prev().text()));
                ////////////////////
                $.get(`http://jx.xuzhixiang.top/ap/api/cart-update-num.php?uid=${uid}&pid=${
                $(this).parent().parent().attr("data_id")}&pnum=${k}`)
                    .then(res => {
                        console.log(res);
                        all_n()
                        getallprice();
                    })
            })
            $(".jia").click(function () {
                let j = $(this).prev().val() - 0;
                j = j + 1
                $(this).prev().val(j)
                $(this).parent().next().text(j * parseInt($(this).parent().prev().text()))
                ///////////////////////////
                $.get(`http://jx.xuzhixiang.top/ap/api/cart-update-num.php?uid=${uid}&pid=${
                   $(this).parent().parent().attr("data_id")}&pnum=${j}`)
                    .then(res => {
                        console.log(res);
                        all_n()
                        getallprice();
                    })
            })
            //输入框进行修改
            $(".num input").change(function () {
                if ($(this).val() <= 0) {
                    $(this).val(1)
                }
                $(this).parent().next().text($(this).val() * parseInt($(this).parent().prev()
                    .text()))
                $.get(`http://jx.xuzhixiang.top/ap/api/cart-update-num.php?uid=${uid}&pid=${$(this).parent().parent().attr("data_id")}&pnum=${
                $(this).val()}`)
                    .then(res => {
                        console.log(res);
                        all_n()
                        getallprice();

                    })

            })







            //删除商品
            $(".del_this").click(function () {
                $.get(
                        `http://jx.xuzhixiang.top/ap/api/cart-delete.php?uid=${uid}&pid=${$(this).parent().attr("data_id")}`
                    )
                    .then(res => {
                        console.log(res);
                        $(this).parent().remove()
                        all_n()
                        //////
                        let cn = 0
                        for (let j = 0; j < $(".check_li").length; j++) {
                            if ($(".check_li").eq(j).is(':checked')) {
                                cn++;
                            }
                            if (cn == $(".check_li").length) {
                                $('#checkall').prop("checked", true);
                            } else {
                                $('#checkall').prop("checked", false);
                            }
                            getallprice();
                        }
                    })

            })
            ///得到总价
            // console.log($(".check_li").eq(1).parent().find(".pprice").text() - 0);

            function getallprice() {
                let sum = 0;
                let sum_li = 0;
                for (let i = 0; i < $(".check_li").length; i++) {
                    if ($(".check_li").eq(i).is(':checked')) {
                        let shop_n = $(".check_li").eq(i).parent().find(".num").find("input").val() - 0
                        sum_li += shop_n
                        sum += shop_n * ($(".check_li").eq(i).parent().find(".pprice").text() - 0)
                    }

                }
                $(".choose_1").text(sum_li)
                $(".shopall").text(sum)
                // console.log(sum_li, sum)
            }
            // getallprice();

            //点击复选框运行
            $(".check_li").click(function () {
                getallprice();
            })



            //1.1 点击全选复选框，让单个复选框全部选中
            $('#checkall').click(function () {
                if ($('#checkall').is(':checked')) {
                    for (let i = 0; i < $(".check_li").length; i++) {
                        $(".check_li").eq(i).prop("checked", true);
                    }
                    getallprice();
                } else {
                    for (let i = 0; i < $(".check_li").length; i++) {
                        $(".check_li").eq(i).prop("checked", false);
                    }
                    getallprice();
                }
            })

            //1.2 点击任意复选框，取消全选
            for (let i = 0; i < $(".check_li").length; i++) {
                $(".check_li").eq(i).click(function () {
                    let conn = 0;
                    for (let j = 0; j < $(".check_li").length; j++) {
                        if ($(".check_li").eq(j).is(':checked')) {
                            conn++;
                        }
                    }
                    if (conn == $(".check_li").length) {
                        $('#checkall').prop("checked", true);
                    } else {
                        $('#checkall').prop("checked", false);
                    }
                    getallprice();
                })
            }


            //导航栏购物车刷新
            function all_n() {
                let nnn = 0
                for (let j = 0; j < $(".num>input").length; j++) {
                    nnn += $(".num>input").eq(j).val() - 0
                }
                $("#shop_car").text(nnn)
            }
        })



    })
</script>

</html>